/**
 * Created by zhangqiang on 16/12/18.
 */

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    fmt = 'yyyy-MM-dd hh:mm:ss',
    doAction = lf.bridgeJs.doAction,
    imgPre = '../public/images/finger/',
    formatTime = lf.utils.format;

const waitForSend = 'waitForSend';

var dataMin = [
    {
        productBand: '千岛果',
        productPrice: '23.5',
        productName: '皇家富士苹果',
        status: 'waitForSend',//0
        count: '23.5',
        sum: '122322',
        img: 'apple.jpg',
        state:'5',
    }, {
        productBand: '千岛果',
        productPrice: '23.5',
        productName: '皇家富士苹果',
        status: 'waitForSend',//0
        count: '23.5',
        sum: '5678585',
        img: 'apple.jpg',
        state:'4',
    }, {
        productBand: '千岛果',
        productPrice: '23.5',
        productName: '皇家富士苹果',
        status: 'waitForSend',//0
        count: '23.5',
        sum: '23',
        img: 'apple.jpg',
        state:'3',
    }, {
        productBand: '千岛果',
        productPrice: '23.5',
        productName: '皇家富士苹果',
        status: 'waitForSend',//0
        count: '23.5',
        sum: '23',
        img: 'apple.jpg',
        state:'1',
    }, {
        productBand: '千岛果',
        productPrice: '23.5',
        productName: '皇家富士苹果',
        status: 'waitForSend',//0
        count: '23.5',
        sum: '23',
        img: 'apple.jpg',
        state:'1',
    },
];

const Product = RC({
    getInitialState() {
        return {}
    },

    componentDidMount() {
         var $min = $(R.findDOMNode(this.refs.min)),
             $add = $(R.findDOMNode(this.refs.add)),
             me = this;

        $.each($min,function(){///减少
            var $me = $(this);
            $me.on('tap',function(){
              let min_btn = $me.parent().find('.text_box');
                min_btn.val(parseInt(min_btn.val())-1)
                if(parseInt(min_btn.val())<0){
                    min_btn.val(0);
                }
                me.setTotal(); console.log($me)
            })

        })

        $.each($add,function(){///增加
            var $me = $(this);
            $me.on('tap',function(){
                let min_btn = $me.parent().find('.text_box');
                min_btn.val(parseInt(min_btn.val())+1)
                if(parseInt(min_btn.val())>200){
                    min_btn.val(200);
                }
                me.setTotal(); console.log($me)
            })

        })
    },

    setTotal:function (){
        var s=0;
        $(".end").each(function(){
            //s+=parseInt($(this).find('input[class*=text_box]').val()) *parseFloat($(this).find('span[class*=price]').text());//这可以跟单价相乘
            s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());;

            console.log(s)
        });
        $(".total").html(s.toFixed(2));
    },

render() {
        let data = this.props.dataMin,
            type = '',
            btns = [],
            color = '';

        switch (data.status) {
            case waitForSend:
                type = '待发货';
                btns = ['发货'];
                color = 'pink';
                break;

            default:
                type = '待处理';
                btns = ['待处理', '处理'];
                color = '';
                break;
        }
        let dataMenu = data.map((e,i)=>{
            return(
                <div className="product mui-table-view-cell end ">
                    <div className="prod-img">
                        <img src={imgPre + e.img} alt="" />
                    </div>
                    <ul className="describe">
                        <li><span>{e.productName}</span> <p>￥<span className="price">{e.sum}</span></p></li>
                    </ul>
                    <div className="btn-add">
                        <input className="min" name="" type="button" value="-"  ref="min"/>
                        <input className="text_box" name="" type="text" value="0" />
                        <input className="add" name="" type="button" value="+" ref="add" />
                    </div>
                </div>
            )
        });

        return <div>{dataMenu}</div>

    }
});

const Root = RC({
    getInitialState() {
        return {}
    },
    componentDidMount() {
        
        
    },
    render() {

        return <div className="all-order">
                       <ul className="setup mui-table-view-cell">
                           <li>全部上架</li>
                           <li>完成</li>
                       </ul>
                     <Product dataMin={this.props.dataMin} />
                    <div className="lump mui-table-view-cell"><span>总价:</span><span className="total">0</span><span>元</span></div>
               </div>
           }
});

lf.appJs.getUser(function (user) {
    R.render(<Root user={user} dataMin={dataMin}/>, document.getElementById('root'),
        function () {
            $('#root').css({
                'background-color': '#ededed',
                'margin-bottom': '.3rem' //与底部撑开
            });
        }
    );
});